<template>
    <div class="wrapper" ref="bscroll">
    <div class="content">
       <header>
           <section>
           <div>云音乐</div>
           <h1>热歌榜</h1>
           <p>更新日期：12月05日</p>
           </section>
       </header>
       <main>
        <div class="new-music">   
        <section v-for="m of music" :key="m.name">
          <figure>
            <figcaption>{{m.name}}</figcaption>
            <figcaption>{{m.song.artists[0].name}}-{{m.song.name}}</figcaption>
          </figure>
          <figure>
              <figcaption>
                  <mark></mark>
              </figcaption>
          </figure>
        </section>
        </div>
       </main>
    </div>
    </div>
</template>

<script>
import BScroll from "@better-scroll/core";
import MouseWheel from "@better-scroll/mouse-wheel";
import { getRecommendMusic} from "../api/index";

BScroll.use(MouseWheel);

export default {
  components: {},
  data: function() {
    return {
      music: [],
      coming: []
    };
  },
  methods:{
      
  },

  mounted() {
    this.bScroll = new BScroll(this.$refs["bscroll"], {
      scrollY: true,
      pullUpLoad: true,
      mouseWheel: {
        speed: 20,
        invert: false,
        easeTime: 300
      }
    });

    getRecommendMusic()
      .then(data => {
        const { result: music } = data;
        this.music = music;
        this.$nextTick(() => {
          this.bScroll.refresh();
        });
      })
      .catch(err => {
        console.error(err);
      });
  }
};
</script>

<style lang="scss" scoped>
.wrapper {

   height: 5rem;
  .content {
header{
    height: 1.5rem;
    background: url(//s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252…=) no-repeat;
    
    color:#fff; 
    section{
        background: rgba(51,51,51,0.2);
        height: 100%;
        padding:0.2rem 0.2rem; 
    }
    h1{
        font-size: 0.4rem;
    }
}

.new-music {
      display: flex;
      flex-direction: column;
      section {
        padding:0 0.1rem;
        display: flex;
        justify-content: space-between;
        height: 0.6rem;
        background: #fff;
        border-bottom: 1px solid #ccc;
        figure:nth-child(1){
            
            figcaption:nth-child(1){
                font-size: 0.16rem;
                line-height: 0.4rem;
                font-weight: normal;
            }
            figcaption:nth-child(2){
                font-size: 0.12rem;
                color: #888;
            }
        }
        figure:nth-child(2){
            display: flex;
            align-items: center;
            figcaption{
                width:0.2rem;
                height: 0.2rem;
                border: 1px solid #888;
                border-radius: 50%;
                line-height: 0.6rem;
                display: flex;
                align-items: center;
                justify-content: center;
                mark{
                    display: block;
                    border: 0.05rem solid;
                    border-color:transparent transparent transparent #888; 
                    margin-left:0.07rem; 
                }
            }
           
        }
      }
    }
  }
}
</style>